<template>
	<page ref='page'>
		<!-- 我的收益 wwl-->
		<view class="page">
			<view class="tab_rows"  >
				<view class="meige"  v-for="(items,indexs) in listData" :key="indexs" :class="choseInd == indexs ? 'active' : 'noactive'"  >
					<view class="texts" @click="gotoDdiehuan(items,indexs)" >
						{{items.name}}
						<!-- <vgt-tab style="z-index: 9;" :list="vgtTab" @onValueChange="vgtChange"></vgt-tab> -->
					</view>
					
				</view>
			</view>
			
			<view class="top_box" v-if="type == 1">
				
				<view class="money">
					<view class="fangke" >
						<view class="zuo" >访客姓名：</view>
						<input class="input" type="text" placeholder="输入姓名" @confirm="getShuru" @blur="getShuru" />
					</view>
					<view class="fangke" >
						<view class="zuo" >登记备注：</view>
						<input class="input" type="text" placeholder="输入备注,访问事项什么的" @confirm="getShurus" @blur="getShurus" />
					</view>
				</view>
			</view>
			
			<view class="center_box" v-if="type == 1">
				<button :class="theme" class="btn_box" :loading="loading" @click="onSave()">添加访客</button>
			</view>
			
			<view class="top_box" v-if="type == 2">
				
				<view class="money">
					<view class="fangke" >
						<view class="zuo" >车牌号：</view>
						<input class="input" type="text" placeholder="输入车牌号" @confirm="getShurucheliang" @blur="getShurucheliang" />
					</view>
					<view class="fangke" >
						<view class="zuo" >登记地址：</view>
						<input class="input" type="text" placeholder="输入几号楼几单元几号" @confirm="getShuruscheliang" @blur="getShuruscheliang" />
					</view>
				</view>
			</view>
			
			<view class="center_box" v-if="type == 2">
				<button :class="theme" class="btn_box" :loading="loading" @click="onSave()">添加车辆</button>
			</view>
			
			
			
			<view class="list_page" >
				<view class="lisfangk" >
					{{choseInd == 0 ? '历史访客记录：' : '车辆记录：' }}
				</view>
				<block v-if='detailedlist && detailedlist.length > 0'>
					<view class="list_box" v-for="(item,index) in detailedlist" :key='index'>
						<!-- <view class="top_box" >
							<view class="time">
								<text>{{item.visitor_name}}</text>
							</view>
							<view class="detailed">
								<text>收入：{{item.remark}}</text>
								<text style="margin-left: 20rpx;" >{{item.created_at}}</text>
							</view>
						</view> -->
						<view class="bottom_box" >
							<view class="row_box" >
								<!-- <view class="left">
									<image :src="role.users.avatar" mode="scaleToFill"></image>
								</view> -->
								<view class="right">
									<view class="info" v-if="type == 1">
										<view class="">
											访客：{{item.visitor_name}}
										</view>
										<view class="">
											登记备注：{{item.remark}}
										</view>
										<view class="">
											<text>登记时间：</text> <text style="margin-left: 10rpx;">{{item.created_at}}</text>
										</view>
									</view>
									<view class="info" v-if="type == 2">
										<view class="">
											车牌号：{{item.car_number}}
										</view>
										<view class="">
											登记地址：{{item.register_address}}
										</view>
										<view class="">
											<text>登记时间：</text> <text style="margin-left: 10rpx;">{{item.created_at}}</text>
										</view>
									</view>
									<!-- <view class="money">
										{{role.amount}}
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</block>
				<empty :status='2' v-else/>
			</view>
			<!-- <foot /> -->
		</view>
		
		
		
		
	</page>
</template>

<script>
	import {setVisitorRegistration,getVisitorRegistrationlist} from "../static/api.js"
	import uParse from '@/components/u-parse/u-parse.vue'
	import { mapState,mapMutations,mapGetters } from 'vuex'
	export default{
		components:{uParse},
		data(){
			return{
				choseInd: 0, // 当前选中
				listData:[{
						name: '访客登记',
						
					},
					{
						name: '车辆登记',
					},
				],
				detailedlist:[],
				openList:[],
				payType:1,
				juesetype: 0,
				loading:false,
				withdrawal:null,
				info:{
					rule:"",
					name:"规则说明",
				},
				fangkename:'',//访客姓名
				remark:'',//登记备注
				page:1,//
				limit:10,//
				total:0,
				type:1,//要登记的类型
				car_number:'',//要登记的车牌号
				register_address:'',//要登记的车辆地址
				house_status:0,//用来判断是否业主认证了
			}
		},
		//往下滑动自动加载
		onReachBottom(x) {
			if (this.page * this.limit >= this.total) return
			this.page++
			this.getList()
		},
		methods:{
			// 大按钮选中触发
			gotoDdiehuan(imea,index) {
				this.choseInd = index;
				this.type = index+1;
				this.getList();
			},
			//获取输入内容名字
			getShuru(e){
				console.log(e,'输入内容')
				this.fangkename = e.detail.value;
			},
			//获取输入内容备注
			getShurus(e){
				console.log(e,'输入内容2')
				this.remark = e.detail.value;
			},
			//获取输入内容名字
			getShurucheliang(e){
				console.log(e,'输入内容')
				this.car_number = e.detail.value;
			},
			//获取输入内容备注
			getShuruscheliang(e){
				console.log(e,'输入内容2')
				this.register_address = e.detail.value;
			},
			
			//获取历史记录
			async getList(){
				uni.showLoading()
				try{
					var res = await getVisitorRegistrationlist({page: this.page,limit: this.limit,type: this.type})
					console.log(res, '查询账单明细啊');
					if(this.page == 1){
						this.detailedlist = res.data.list
					}else{
						this.detailedlist = [...this.detailedlist, ...res.data.list]
					}
					
					this.total = res.data.count;
					console.log(this.detailedlist, '查询账单明细啊');
					uni.hideLoading()
				}catch{
					uni.hideLoading()
				}
			},
			
			
			//提交登记
			async onSave(){
				
				if(this.house_status == 1){
					uni.showToast({
						title:'业主认证后可使用该功能',
						icon:'error',
						duration:2000
					})
					return false
				}
				
				if(this.type == 1){
					if (!this.$regular.funShowToast(null, this.visitor_name , '请输入访客姓名')) return false
					uni.showLoading({
					  mask: true,
					  title: '请稍后...'
					})
					var res = await setVisitorRegistration({visitor_name:this.fangkename,remark:this.remark,type:this.type})
					if(res.code == 200){
						uni.showToast({title:res.msg,duration:2000})
						this.fangkename = '';
						this.remark = '';
						this.page = 1;
						uni.hideLoading()
						setTimeout(() => {
							this.getList()
						}, 2000);
						
					}else{
						uni.hideLoading()
						uni.showToast({title:res.msg,duration:2000,icon:'fail'})
					}
				}else{
					if (!this.$regular.funShowToast(null, this.car_number , '请输入车牌号')) return false
					if (!this.$regular.funShowToast(null, this.register_address , '请输入登记地址')) return false
					uni.showLoading({
					  mask: true,
					  title: '请稍后...'
					})
					var res = await setVisitorRegistration({car_number:this.car_number,register_address:this.register_address,type:this.type})
					if(res.code == 200){
						uni.showToast({title:res.msg,duration:2000})
						this.car_number = '';
						this.register_address = '';
						this.page = 1;
						uni.hideLoading()
						setTimeout(() => {
							this.getList()
						}, 2000);
						
					}else{
						uni.hideLoading()
						uni.showToast({title:res.msg,duration:2000,icon:'fail'})
					}
				}
				
			},
			
		},
		computed:{
			...mapGetters('theme', ['theme']),
			...mapState(['theme']),
			userInfo() {
				return this.$store.getters.userInfo
			}
		},
		onLoad(params){
			console.log(this.$store.getters.userInfo,'用户信息')
			if(this.$store.getters.userInfo.house_record == 0){
				uni.showToast({
					title:'业主认证后可使用该功能',
					icon:'error',
					duration:2000
				})
				this.house_status = 1;
			}else{
				this.getList()
			}
		},
	}
</script>
<style lang="scss" scoped>
	.page{
		// min-height: 100vh;
		background-color: #fff;
		
	}
	.top_box{
		padding: 10px 0px;
		width: 100%;
		background-color: #dcdcdc;
		box-sizing: border-box;
		.title{
			color:#26252A;
			font-size: 28rpx;
			line-height: 34rpx;
			margin-bottom: 24rpx;
		}
		.money{
			font-size: 30rpx;
			.fangke{
				display: flex;
				    justify-content: flex-start;
				    flex-direction: row;
				    align-items: center;
				    height: 28px;
				    background: #fff;
				    margin-bottom: 3px;
				    padding: 10px 10px;
			}
			.zuo{
				flex: 0 0 24%;
			}
			.input{
				width: 100%;
			}
		}
	}
	.center_box{
		padding: 0 38rpx 0;
		width: 100%;
		box-sizing: border-box;
		.title{
			font-size: 28rpx;
			color:#26252A;
			line-height: 40rpx;
			margin-bottom: 44rpx;
		}
		.operation{
			display: flex;
			justify-content:space-between;
			align-items: center;
			padding: 20rpx 0 ;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #f6f7fb;
			.text{
				width: calc(100% - 5em);
			}
			.btn{
				width:  5em;
				text-align: right;
				font-size: 24rpx;
				color:#26252A;
			}
		}
	}
	.type{
		display: flex;
		justify-content: center;
		.row{
			display: flex;
			align-items: center;
			&:last-child{
				margin-left: 40rpx;
			}
			image{
				width: 66rpx;
				height: 66rpx;
				margin-left:10rpx;
			
			}
		}
		
	}
	.tixmx{
		font-size: 13px;
		    color: #36353a;
		    width: 100%;
		    height: 30px;
		    line-height: 30px;
		    text-align: center;
		    border: 1px solid #707070;
		    border-radius: 16px;
	}
	.tixian{
		padding: 0px 20px 0px 20px;
	}
	.zhangdmx{
		font-size: 13px;
		    color: #36353a;
		    width: 56px;
		    height: 30px;
		    line-height: 30px;
		    text-align: center;
		    border: 1px solid #707070;
		    border-radius: 16px;
	}
	.btn_box{
		width: 100%;
		width: 676rpx;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		color:#fff;
		// background: linear-gradient(270deg,#ff7a1f, #fd9d3c);
		border-radius: 200rpx;
		margin:20rpx 0 20rpx;
	}
	button[loading]::before{
		align-self:center
	}
	button{
		display: flex;
		justify-content: center;
		align-item:center;
		padding: 0;
	}
	button::after{
		border: none;
	}
	.bottom_box{
		.name{
			margin-bottom: 10rpx;
		}
		color: #020202;
		    font-size: 16px;
		    padding: 10px 10px;
		    box-shadow: 0px 1px 2px 1px #d2d2d2;
	}
	
	.lisfangk{
		padding: 10px 10px;
		    background: #ffb800;
		    color: #fff;
		    box-shadow: 1px 1px 1px 1px #999;
	}
	
	.list_box{
		padding: 10px 0px;
	}
	
	
	
	.tab_rows{
		margin-bottom: 10px;
		padding: 0px 14px;
		display: flex;
		    justify-content: space-between;
		    flex-direction: row;
		    align-items: center;
	}
	.tab_rows .meige{
		/* min-width: 60px; */
		padding: 0 10px;
		text-align: center;
		border-radius: 16px;
		/* margin: 0 0 0 10px; */
		background-color: #d2d2d2;
		flex: 0 0 43%;
		height: 63px;
	}
	.noactive{
		font-size: 18px;
		line-height: 63px;
	}
	.active{
		font-size: 18px;
		line-height: 63px;
		color: #f4f4f4 !important;
		background-image: linear-gradient(#ff9b03, #fcb74e) !important;
		box-shadow: 0px 3px 7px 0px #ff9e0c;
			
	}
	
	.dangqianxiaoqu{
		margin: 10px 14px;
		    padding: 10px 10px;
		    background: #ff7600;
		    border-radius: 10px;
		    color: #fff;
		    font-size: 14px;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
	}
	
	.wuyefeijiaona{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
	}
	.wuyefeijiaona .text{
		flex: 0 0 20%;
		border-left: 1px solid #999;
		    padding: 3px 10px 3px 10px;
		text-align: center;
	}
	.wuyefeijiaona .yanse1{
		color: #b70000;
	}
	.wuyefeijiaona .yanse2{
		color: #009844;
	}
	.wuyefeijiaona .title{
		flex: auto;
	}
	.yanjin{
		width: 28px;
		height: 24px;
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: center;
			
	}
	.bgc_imgs{
		width: 100%;
		height: 100%;
		display: inline;
		overflow: hidden;
		position: relative;
	}
	
	.standard_box23{
		border: 2rpx solid #d8d8d8;
		padding: 4rpx 0rpx 4rpx 20rpx;
	}
	
	
</style>
